<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>核销配置</span>
    </div>
    <div class="container">
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="ChannelList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
      
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="channelName"
            align="center"
            label="通道名称"
          ></el-table-column>
          <el-table-column prop="channelType" align="center" label="通道类型 ">
          </el-table-column>
          <el-table-column
            prop="channelStatus"
            width="260"
            align="center"
            label="通道状态 "
          >
            <template slot-scope="scope">
              <div>{{ scope.row.channelStatus == 1 ? "关闭" : "正常" }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="sharedOffer" align="center" label=" 共享优惠">
            <template slot-scope="scope">
              <div>{{ scope.row.sharedOffer == 1 ? "共享" : "不共享" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="changeState(scope.row)"
                >修改状态</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br />
      <br />
      <el-dialog
        title="修改核销配置"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <div class="item">
          <span>通道名称：</span><span>{{ channelName }}</span>
        </div>
        <div class="item">
          <span>通道类型：</span><span>{{ channeType }}</span>
        </div>
        <div class="item">
          <span>通道状态：</span>
          <el-radio-group v-model="channelStatusstate">
            <el-radio-button label="0">正常</el-radio-button>
            <el-radio-button label="1">关闭</el-radio-button>
          </el-radio-group>
        </div>
        <div class="item">
          <span>是否共享：</span>
          <el-radio-group v-model="sharedOfferstate">
            <el-radio-button label="0">不共享</el-radio-button>
            <el-radio-button label="1">共享</el-radio-button>
          </el-radio-group>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCouponChannel"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="quedingvisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>您确定要修改核销配置？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quedingvisible = false">取 消</el-button>
          <el-button type="primary" @click="sureUpdate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { APIqueryAllCouponChannel, APIupdateCouponChannel } from "@/api/api";

export default {
  name: "item-one",
  data: function () {
    return {
      ChannelList: [],
      centerDialogVisible: false,
      channelName: "",
      channeType: "",
      sharedOfferstate: "",
      channelStatusstate: "",
      channelId: "",
      quedingvisible: false,
      params:{}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    updateCouponChannel() {
      this.quedingvisible = true;
         this.params = {
        id: this.channelId,
        channelStatus: this.channelStatusstate,
        sharedOffer: this.sharedOfferstate,
      };
    },
    sureUpdate() {
      this.quedingvisible = false;

      
      APIupdateCouponChannel(this.params).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.getList()
          this.centerDialogVisible = false;
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    changeState(item) {
      console.log("item==", item);
      this.centerDialogVisible = true;
      this.channelName = item.channelName;
      this.channeType = item.channelType;
      this.sharedOfferstate = item.sharedOffer;
      this.channelStatusstate = item.channelStatus;
      this.channelId = item.id;
      console.log(this.sharedOfferstate, "==", this.channelTypestate);
    },
    getList() {
      APIqueryAllCouponChannel().then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.ChannelList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.merchantlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.merchantlist();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped lang='less'>
.item {
  font-size: 16px;
  padding-top:10px;
  padding-left: 30px;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.green {
  color: green;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.el-upload {
  height: 250px !important;
}
.el-autocomplete {
  width: 95%;
}
.servicelevels {
  width: 95%;
}
.code_img {
  float: right;
  width: 20px;
  height: 20px;
  // margin-left: 10px;
}
.gzh_ka {
  width: 400px;
  height: 550px;
  // background-color: pink;
  margin: 0 auto;
  position: relative;
  .box_warp {
    width: 331px;
    height: 451px;
    position: absolute;
    top: 30px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .box {
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.xcx_ka {
  width: 400px;
  height: 550px;
  // background-color: red;
  position: relative;
  margin: 0 auto;
  .box_xcxp {
    width: 331px;
    height: 451px;
    position: absolute;
    top: 30px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .box1 {
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.ka_btn {
  width: 140px;
  height: 35px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  // border: 2px red;
  // background-color: #fff;
  font-size: 16px;
  font-weight: 800;
  border-width: 2px;
  // color: #fe6a00;
  background: none;
  // border-color: #fe6a00;
}
// .sub2{}
.ka_btn:active {
  // background: #fe6a00;
  // border-color: #fe6a00;
  color: #fff;
}
#qrcode1 {
  position: absolute;
  top: 149px;
  left: 78px;
  z-index: 1;
}
#qrcode2 {
  position: absolute;
  top: 149px;
  left: 78px;
  z-index: 1;
}
.btnbox {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  .btn {
    padding: 10px 25px;
  }
  .blue {
    background: rgb(95, 13, 226);
    color: #fff;
  }
}
</style>